<!--shift+alt+上=向上移动
template放HTML script放js style放css
注意：script标签上得有setup-->
<template>
<!--如果修改值，则页面不会更新，因为没有响应式变量，所以需要使用ref创建响应式变量-->
插值指令：将页面上显示的文本内容与响应式变量的只进行绑定-->
<h1>我们的第一个Vue组件</h1>
  <span>{{msg}}</span>
  <p>{{msg}}</p>
  {{msg+'罗婉宁'}}
  <p v-text="msg"></p>
<!--  显示纯文本-->
  <p v-html="msg2"></p>
<!--  显示html标签-->
  <button @click="msg = '罗婉宁罗婉宁罗婉宁'">点击</button>
</template>
<script setup>
//1.创建相应式变量
import {ref} from "vue";

const msg = ref('hello world,I am Info <mark> 罗婉宁</mark>');
const msg2 = ref('<span style="color:red">hello world,I am Info</span>');
//定义箭头函数
// const changeMsg = () => {
//   msg.value = '罗婉宁';
//   console.log(msg.value);
// }
</script>


<style scoped>

</style>
